<template>
    <div class="conditionDiv">
        <div class="minDiv">
            <div class="form-condition" @click.stop="sqlShow=(sqlShow?'':'constant')"><my-icon type="iconxinzeng" style="margin-right: 5px"></my-icon>
                <span>
                    {{i18n('form.insertConstant','插入常量')}}
                </span>
            </div>
            <div class="opinion-parenthesis" id="constant" v-show="sqlShow=='constant'">
                <div class="opinion-parenthesis-triangle"></div>
                <div style="position: relative">
                    <ul class="opinion-parenthesis-list">
                        <li v-for="(time,index) in constantField" v-if="time.label" :value="index">
                            <div @click.stop="insertChange(time.value)">{{time.label}}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="minDiv">
            <div class="form-condition" @click.stop="sqlShow=(sqlShow?'':'function')"><my-icon type="iconxinzeng" style="margin-right: 5px"></my-icon>
                <span>{{i18n('form.function','插入函数')}}</span>
            </div>
            <div class="opinion-parenthesis" id="function" v-show="sqlShow=='function'">
                <div class="opinion-parenthesis-triangle"></div>
                <div style="position: relative">
                    <ul class="opinion-parenthesis-list">
                        <li v-for="(time,index) in functionField" v-if="time.label" :value="index">
                            <div @click.stop="insertChange(time.value)">{{time.label}}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "miniQueryScriptVars",
        data(){
            return {
                sqlShow:"",
                constantField: [],
                functionField: []
            }
        },
        created() {
            this.init();
        },
        methods:{
            i18n(name, text, key) {
                return this.$ti18(name, text, "miniQuery", key);
            },
            init(){
                //初始化常量
                this.initConstant();
                //初始化函数
                this.initFunction();
            },
            initConstant() {
                this.constantField = [
                    {label: this.i18n('form.currentUserID','当前用户ID'), value: "user.userId"},
                    {label: this.i18n('form.account','当前用户账号'), value: "user.account"},
                    {label: this.i18n('form.name','当前用户名称'), value: "user.fullName"},
                    {label: this.i18n('form.departmentID','当前用户部门ID'), value: "user.deptId"},
                    {label: this.i18n('form.departmentName','当前用户部门名称'), value: "user.deptName"},
                    {label: this.i18n('form.companyID','当前用户公司ID'), value: "user.companyId"},
                    {label: this.i18n('form.role','当前用户角色'), value: "user.roles"},
                    {label: this.i18n('form.administrator','是否管理员'),value: "user.admin"}
                ]
            },
            initFunction(){
                this.functionField=[
                    {label:  this.i18n('form.null','判断为空'), value: "StringUtils.isEmpty(str)"},
                    {label:  this.i18n('form.timeFormatting','格式化时间'), value: "DateUtils.parseDateToStr(format,date)"}
                ]
            },
            insertChange(value){
                this.sqlShow="";
                this.$emit("insertScript",value);
            }
        }
    }
</script>

<style scoped>
    .form-condition{
        cursor: pointer;
        color: #444444;
        font-size: 14px;
        display: flex;
    }
    .form-condition i {
        font-size: 18px;
        margin-top: 15px;
    }
    .opinion-parenthesis-triangle{
        height: 5px;
        width: 0px;
        border: 10px solid;
        border-color: transparent transparent white transparent;
        position: absolute;
        top: -17px;
        left: 36px;
    }
    .opinion-parenthesis-list{
        margin-top: 20px;
    }
    .opinion-parenthesis-list li{
        color: #444444;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px 12px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
    }
    .opinion-parenthesis-list li i{
        margin-right:5px;
        font-size: 18px;
    }
    .opinion-parenthesis-list li i:hover{
        color:#4285f4
    }
    .opinion-parenthesis-list li div{
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        padding-left: 5px;
    }
    .opinion-parenthesis-list li div:hover{
        background-color: #f2f3f6;
        border-radius: 4px;
    }
    .opinion-parenthesis{
        position: absolute;
        top: 42px;
        left:0px;
        width: 300px;
        background-color: #ffffff;
        box-shadow: 0px 0px 13px 0px
        rgba(6, 0, 1, 0.17);
        border: solid 1px #eeeeee;
        border-radius: 4px;
        z-index: 9;
    }
    .conditionDiv {
        display: flex;
        height: 50px;
    }
    .conditionDiv .minDiv {
        display: flex;
        align-items: center;
        position: relative;
        margin-right: 20px;
    }

    .conditionDiv .minDiv span {
        white-space: nowrap;
    }
</style>